<!DOCTYPE html>
<html>
	<head>
		<title>记账本</title>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="description" content="Tiny-bookkeeping v1.0.0" />
		<meta name="Author" content="Tiny" />
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta name ="apple-mobile-web-app-title"content ="bill">
		<link rel="shortcut icon" type="text/css" href="img/favicon.ico" />
		<link rel="apple-touch-icon-precomposed" href="img/banner3_03.png" />
		<link rel="apple-touch-startup-image" href="start/Startpage@3x.png" sizes="1242x2208">
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/app.css"/>
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css"/>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/mui.picker.min.js"></script>
	</head>
	<style type="text/css">
		#list {
			/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
			margin-top: -1px;
		}
		.mui-input-row {
			background-color: #ffffff;
		}
		#budget{
			line-height: 40px;
			
		}
		body{
			background-image: url(start/Startpage@3x.png);
			height: 100%;
			background-size: 100%;
		}
		.mui-content{
			opacity: 0.9;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">
				<span class="mui-pull-left">消费金额</span> 
				<span>消费金额</span> 
				<a class="mui-pull-right"id="det">消费详情</a></h1>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded" >
				<div class="mui-input-row " >
					<label>预算总金额</label>
					<span  id="budget"></span>
					<button type="button" id="budget-reset"data-loading-icon="mui-spinner mui-spinner-custom" class="mui-pull-right mui-btn-royal ">重新设置预算金</button>
				</div>
				<div class="mui-input-row " >
					<label>预算剩余</label>
					<span  id="budget-remaining"></span>
				</div>
				<div class="mui-input-row " >
					<label>消费总额</label>
					<span  id="total"></span>
				</div>
				<div class="mui-input-row " >
					<label>当前消费金额</label>
					<input type="number" id="consumption" class="mui-input-clear" placeholder="输入您此次的消费金额（单位：元）" onkeyup="this.value=this.value.replace(/\-/g,'')">
				</div>
				<div class="mui-input-row " >
					<label>消费内容</label>
					<input type="text" id="detail" class="mui-input-clear" placeholder="请输入此次消费的内容">
				</div>
				<button id='demo1' data-options='{}' class="btn mui-btn mui-btn-block">选择日期时间</button>
				<div class="mui-button-row " >
					 <button type="button"data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary mui-btn-block sure">确认</button>
				</div>
			</div>
		</div>
		<div style="width: 100%;height: 40px;position: fixed;bottom: 0;text-align: center;line-height: 40px;">
			<a style="color: black;" href="tel:1-862-551-8603">联系我：18625518603</a>
			<span> &nbsp;QQ:839435033</span>
		</div>
		<script type="text/javascript" src="js/date.js"></script>
		<script>
			
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			if(localStorage.getItem("Book") == null){
				window.location.href = 'index.html';
			}
			var Book = JSON.parse(localStorage.getItem('Book'));
			console.log(Book);
			var budget_remaining = 0;
			var total = 0;
			for(var i = 1;i<Book.length;i++)
			{
				total = total + parseFloat(Book[i].consumption)
			}
			var budgetNum =parseFloat(Book[0].budget) ;
			console.log(budgetNum.toFixed(2));
			document.getElementById('budget-remaining').innerHTML = (budgetNum - total).toFixed(2) + "元";
			document.getElementById('total').innerHTML = total.toFixed(2) + "元";
			document.getElementById('det').onclick = function(){
				window.location.href = 'detail.html';
			}
			budget_remaining = budgetNum - total;
			document.getElementById('budget').innerHTML = budgetNum.toFixed(2) + "元";
			mui(document.body).on('tap', '.sure', function(e) {
				mui(this).button('loading');
				Book = JSON.parse(localStorage.getItem('Book'));
				var consumption = document.getElementById("consumption").value;
				if(consumption == '')
				{
					consumption = 0;
					mui.toast('您输入的金额为空！',{ duration:'long', type:'div' }) 
				}else{
					consumption =parseFloat(consumption).toFixed(2);
					var budget = Book[Book.length-1].budget - consumption;
					var count = Book[Book.length-1].count;
					total = parseFloat(consumption)+ total;
					document.getElementById('total').innerHTML = total.toFixed(2) + "元";
					budget_remaining =budgetNum - total;
					document.getElementById('budget-remaining').innerHTML = budget_remaining.toFixed(2)+ "元";
					var nowDate = now();
					var selectDate = document.getElementById('demo1').innerText;
					if(selectDate == "选择日期时间"){
						
					}else
					{
						nowDate = selectDate;
					}
					console.log(nowDate);
					var consumption = {
						consumption:consumption,
						detail:document.getElementById("detail").value,
						count:++count,
						budget:budget,
						nowDate:nowDate
					}
					Book.push(consumption);
					localStorage.setItem('Book', JSON.stringify(Book));
				}
					setTimeout(function() {
						document.getElementById("consumption").value='';
						document.getElementById("detail").value='';
						mui(this).button('reset');
//						window.location.reload();
					}.bind(this), 500);				
			});
			mui(document.body).on('tap', '#budget-reset', function(e) {
				mui(this).button('loading');
				localStorage.removeItem('Book');
				setTimeout(function() {
					window.location.href = 'index.html';
					mui(this).button('reset');
				}.bind(this), 500);
			})
			var nativeWebview, imm, InputMethodManager;
			var initNativeObjects = function() {
				if(mui.os.android) {
					var main = plus.android.runtimeMainActivity();
					var Context = plus.android.importClass("android.content.Context");
					InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
					imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
				} else {
					nativeWebview = plus.webview.currentWebview().nativeInstanceObject();
				}
			};
			var showSoftInput = function() {
				if(mui.os.android) {
					imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
				} else {
					nativeWebview.plusCallMethod({
						"setKeyboardDisplayRequiresUserAction": false
					});
				}
				setTimeout(function() {
					var inputElem = document.querySelector('input');
					inputElem.focus();
					inputElem.parentNode.classList.add('mui-active'); //第一个是search，加上激活样式
				}, 200);
			};
			mui.plusReady(function() {
				initNativeObjects();
				showSoftInput();
			});
			
		</script>
		<script>
			(function($) {
				$.init();
				var result = $('#demo1')[0];
				var btns = $('.btn');
				btns.each(function(i, btn) {
					btn.addEventListener('tap', function() {
						var _self = this;
						if(_self.picker) {
							_self.picker.show(function (rs) {
								result.innerText = rs.text;
								
								_self.picker.dispose();
								_self.picker = null;
							});
						} else {
							var optionsJson = this.getAttribute('data-options') || '{}';
							var options = JSON.parse(optionsJson);
							var id = this.getAttribute('id');
							/*
							 * 首次显示时实例化组件
							 * 示例为了简洁，将 options 放在了按钮的 dom 上
							 * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
							 */
							_self.picker = new $.DtPicker(options);
							_self.picker.show(function(rs) {
								/*
								 * rs.value 拼合后的 value
								 * rs.text 拼合后的 text
								 * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
								 * rs.m 月，用法同年
								 * rs.d 日，用法同年
								 * rs.h 时，用法同年
								 * rs.i 分（minutes 的第二个字母），用法同年
								 */
								result.innerText =  rs.text;
								
								/* 
								 * 返回 false 可以阻止选择框的关闭
								 * return false;
								 */
								/*
								 * 释放组件资源，释放后将将不能再操作组件
								 * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
								 * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
								 * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
								 */
								_self.picker.dispose();
								_self.picker = null;
							});
						}
						
					}, false);
				});
			})(mui);
		</script>
	</body>

</html>